<template>
  <v-app>
    <v-main class="mt-5">
      <v-container>
        <v-row>
          <v-col cols="6">
            <h1 class="display-3 font-weight-bold mb-5">TodoList</h1>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="6"
                 sm="4"
                 md="3">
            <v-text-field outlined
                          v-model="backlog"
                          label="待办事项"
                          dense></v-text-field>
          </v-col>
          <v-col cols="6"
                 md="4">
            <v-btn class="mr-4 success"
                   type="submit"
                   @click="addEventList">
              添加计划
            </v-btn>
            <v-btn @click="clear"
                   class="orange white--text">
              清空
            </v-btn>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12"
                 sm="6"
                 md="6">
            <unfinished-list :eventList="unfinishedList"
                             @statusChange="changeStatus"></unfinished-list>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12"
                 sm="6"
                 md="6">
            <finished-list :eventList="finishedList"
                           @statusChange="changeStatus"></finished-list>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import FinishedList from './components/FinishedList'
import UnfinishedList from './components/UnfinishedList.vue'
export default {
  name: 'App',
  components: {
    FinishedList, UnfinishedList
  },
  data () {
    return {
      backlog: '',
      eventList: [['unfinish', '吃烤肉'], ['finished', '睡觉'], ['finished', '狠狠洗把脸'], ['unfinish', '跑三公里']],
      unfinishedList: [],
      finishedList: []
    }
  },
  created () {
    this['getUnfinishedList']()
    this['getFinishedList']()
  },
  methods: {
    clear () {
      this.backlog = ''
    },
    addEventList () {
      this.eventList.push(['unfinish', this.backlog])
      this['getUnfinishedList']()
      this['getFinishedList']()
      this['clear']()
    },
    changeStatus (event) {
      this.eventList.forEach(item => {
        if (item[1] === event) {
          item[0] = item[0] === 'finished' ? 'unfinish' : 'finished'
          this['getUnfinishedList']()
          this['getFinishedList']()
        }
      })
    },
    getUnfinishedList () {
      this.unfinishedList = this.eventList.filter(event => event[0] === 'unfinish').sort((x, y) => x[1].length > y[1].length ? 1 : -1)
    },
    getFinishedList () {
      this.finishedList = this.eventList.filter(event => event[0] === 'finished').sort((x, y) => x[1].length > y[1].length ? 1 : -1)
    }
  },
};
</script>
